📐【容器與內容分離的格線系統設計】排版更穩定、維護更簡單

在做網頁排版時，我們經常會使用「格線系統（Grid System）」來規劃整體版面。尤其在 RWD（響應式設計）中，把畫面分成 12 欄是常見的做法。但你知道嗎？格線系統的關鍵，其實在於「容器（Container）」和「內容（Content）」要分離設計。

💡 什麼是容器與內容分離？

簡單來說：

容器（Container）：負責決定版面的寬度、邊距、排列方式（例如居中、最大寬度等）。

內容（Content）：是實際的元素區塊，比如圖片、文字卡片、按鈕等等，按照格線去擺放。

這種分離的好處是：容器專心負責「整體框架」，內容專心「填進去」，互不干擾，讓版面更穩定、維護更輕鬆。

📦 範例說明

假設你有一個 12 欄格線系統，我們可以這樣寫：

<div class="container">
  <div class="row">
    <div class="col-8">主內容區</div>
    <div class="col-4">側邊欄</div>
  </div>
</div>

搭配 CSS：

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.col-8, .col-4 {
  padding: 0 10px;
}

.col-8 {
  calc(100%/12*8);
}

.col-4 {
  calc(100%/12*4);
}

這裡的 .container 控制整體寬度與對齊，而 .col-* 則是內容欄位的寬度。這樣一來，你只需要專注在「想放幾欄」的內容上，容器會自動幫你處理好整體版面。

為什麼要這樣做？

1. 維護更容易：需要改變最大寬度或對齊方式時，只要改 .container 即可。
2. 樣式重複利用：內容的欄位規則可以被重複套用。
3. 響應式支援：配合 media query，格線內容可以自由收合、換行，靈活應對各種螢幕。

✅ 小結
容器與內容分離，是現代格線系統的核心觀念。你可以用 Bootstrap、Tailwind，甚至自製格線系統，只要記得「容器處理框架，內容處理欄位」，就能寫出穩定又可維護的版面！